<template>
  <div class="contienar">
    <div class="box">
      <header class="header"></header>
      <main class="content">1</main>
    </div>
    <footer class="footer">
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">标签</van-tabbar-item>
        <van-tabbar-item icon="search">标签</van-tabbar-item>
        <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
        <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
      </van-tabbar>

    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const active = ref(0);
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}

#app,
.contienar,
body,
html {
  width: 100%;
  height: 100%;
}

.contienar {
  width: 100%;
  height: 100%;
}

.box {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: auto;

  .header {
    height: 50px;
  }

  .content {
    flex: 1;
    overflow: auto;
  }
}

.footer {
  flex: 1;
  overflow: auto;
}
</style>